<template>
  <xhh-select
    v-model="value"
    :api="api"
    multiple
    filterable
    remote
    reserve-keyword
    :option-map="optionMap"
    @change="handleChange"
    @change-val="handleChangeVal"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref([
  '79f9cff2e2de4aa1a6dd638127e38fe6',
  '6411296ff16e464faaccdff31ab16e2f',
])
const optionMap = {
  value: 'id',
  label: 'name',
}
const api = {
  url: '/thc-platform-core/tsStaff/pageList/',
  params: {
    dataFlag: '0',
    page: 1,
    pagesize: 20,
    offset: 0,
  },
  config: {
    resultFn(res) {
      return res.data.pageList
    },
    queryFn(query) {
      return {
        ...(query
          ? {
              name: query,
            }
          : {}),
      }
    },
    loadById: {
      url: '/thc-platform-core/tsStaff/load',
      config: {
        queryFn(query) {
          return {
            id: query,
          }
        },
        resultFn(res) {
          return res.data
        },
      },
    },
  },
}
function handleChange(...args) {
  console.log('handleChange', ...args)
}
function handleChangeVal(...args) {
  console.log('handleChangeVal', ...args)
}
</script>
